import React, { memo, useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { useParams } from 'react-router-dom'
import {
  PlayerWrapper,
  LeftWrapper,
  RightWrapper
} from './style'
import SongInfo from './c-cpns/songinfo'
import Comments from './c-cpns/comments'
import SimiPlaylist from './c-cpns/simiplaylist'
import SimiSong from './c-cpns/simisong'
import {
  getSongDetailAction,
  getSongCommentsAction
} from './store/actionCreators'
export default memo(function Song(props) {
  const {id} = useParams()
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getSongDetailAction(id))
    dispatch(getSongCommentsAction(id, 35, 0))
  },[dispatch,id])
  return (
    
    <PlayerWrapper className="wrap-v2">
      <LeftWrapper>
        <SongInfo/>
        <Comments/>
      </LeftWrapper>
      <RightWrapper>
        <SimiPlaylist/>
        <SimiSong/>
      </RightWrapper>
    </PlayerWrapper>
  )
  
})

